<script setup lang="ts">
// 生意参谋 市场 市场大盘 行业构成 子行业分布

import {message} from "ant-design-vue";
import {getCurrentInstance} from "vue";
import EChart from "~/contentScripts/views/echart.vue";
import BaseApp from "~/contentScripts/views/sycm/baseApp.vue";
import User from "~/contentScripts/views/tao/list/components/user.vue";
import {isLogin} from "~/logic";
import SYCM from "~/utils/ali/sycm";
import Trans from "~/utils/sycm/trans";

const visible = ref(false);
const loginVisible = ref(false);
const dataSource = ref<any[]>([]);
const chartOptions = ref<any>({
  tooltip: {
    formatter: function (info) {
      return info.data.name + '<br/>' + '卖家数：' + info.data.number + '(' + (info.data.value * 100).toFixed(2) + '%)';
    }
  },
  series: [],
});
const chartAllOptions = ref<any>({
  tooltip: {
    formatter: function (info) {
      return info.data.name + '<br/>' + '卖家数：' + info.data.number + '(' + (info.data.value * 100).toFixed(2) + '%)';
    }
  },
  series: [],
});
const chartTradeOptions = ref<any>({
  tooltip: {
    formatter: function (info) {
      return info.data.name + '<br/>' + '有交易买家数：' + info.data.number + '(' + (info.data.value * 100).toFixed(2) + '%)';
    }
  },
  series: [],
});
const __option = getCurrentInstance()?.appContext.provides.option;
const handle = async () => {
  if (isLogin({
    emit: () => {
      loginVisible.value = true;
    }
  }, __option)) {
    let data = await SYCM.getInternalFiberData('#sycm-mc-mq-map-table-table > div.oui-card-content', 'memoizedProps.children._owner.memoizedProps.originalTableData');
    let parentCateName = document.querySelector("[id^=__qiankun_microapp_wrapper_for_op_mc] > div > div > div > div > div.ebase-FaCommonFilter-module__root  div.ebase-FaCommonFilter-module__top > div.ebase-FaCommonFilter-module__left  a.common-picker-header")?.getAttribute('title');
    if (typeof data.data === 'undefined' || data.data.length == 0) {
      message.error('获取数据失败,请稍后重试');
      return false;
    }
    // console.log(data);
    data.data.map((item) => {
      item.parentCate = {
        cateName: parentCateName,
      };
      // item.tradeIndex_tran = Trans.number(item.tradeIndex.value);
      // 父行业卖家数
      item.parentSlrCnt = {value: parseInt((item.slrCnt.value / item.parentCateSlrRate.value).toFixed(2))};
      // 父行业有交易卖家数
      item.parentTradeSlrCnt = {
        value: parseInt((item.tradeSlrCnt.value / item.parentCateTradeSlrCntRate.value).toFixed(2))
      }
      item.date = data.params.dateRange.split('|').join('~');
    });
    chartTradeOptions.value.series = [
      {
        name: parentCateName,
        type: 'treemap',
        data: data.data.map((item) => {
          return {
            name: item.areaName.value,
            value: item.parentCateTradeSlrCntRate.value,
            number: item.tradeSlrCnt.value,
          }
        }),
      }
    ];
    chartAllOptions.value.series = [
      {
        name: parentCateName,
        type: 'treemap',
        data: data.data.map((item) => {
          return {
            name: item.areaName.value,
            value: item.parentCateSlrRate.value,
            number: item.slrCnt.value,
          }
        }),
      }
    ];
    // console.log(JSON.stringify(chartOptions.value));
    dataSource.value = data.data;
    visible.value = true;
  }
}
const columns = [
  {
    dataIndex: 'parentCate.cateName',
    title: '行业类目',
    width: 180,
    tooltip: true,
  },
  {
    dataIndex: 'areaName.value',
    title: '省份',
    width: 180,
    sorter: (a, b) => a.areaName.value.localeCompare(b.areaName.value),
  },
  // {
  //   dataIndex: 'parentCate.cateName',
  //   title: '父行业类目',
  //   width: 240,
  //   tooltip: true,
  // },
  {
    dataIndex: 'date',
    title: '日期',
    width: 220,
    tooltip: true,
    sorter: (a, b) => a.date.localeCompare(b.date),
  },
  {
    dataIndex: 'slrCnt.value',
    title: '卖家数',
    align: 'center',
    sorter: (a, b) => a.slrCnt.value - b.slrCnt.value,
    dataType: 'customRender',
    render: (text, row, index) => {
      // 金额格式化 每隔三位 给金额增加一个英文逗号
      return text.toString().replace(/\d+/, function (n) {
        // 先提取整数部分
        return n.replace(/(\d)(?=(\d{3})+$)/g, function ($1) {
          return $1 + ",";
        });
      });
    }
  },
  {
    dataIndex: 'parentSlrCnt.value',
    title: '行业卖家数',
    align: 'center',
    sorter: (a, b) => a.parentSlrCnt.value - b.parentSlrCnt.value,
    dataType: 'customRender',
    render: (text, row, index) => {
      // 金额格式化 每隔三位 给金额增加一个英文逗号
      return text.toString().replace(/\d+/, function (n) {
        // 先提取整数部分
        return n.replace(/(\d)(?=(\d{3})+$)/g, function ($1) {
          return $1 + ",";
        });
      });
    }
  },

  {
    dataIndex: 'parentCateSlrRate.value',
    title: "行业卖家数占比",
    dataType: 'custom',
    slot: 'parentCateSlrRate',
    align: 'center',
    sorter: (a, b) => a.parentCateSlrRate.value - b.parentCateSlrRate.value,
  },
  {
    dataIndex: 'tradeSlrCnt.value',
    title: "有交易买家数",
    dataType: 'custom',
    slot: 'tradeSlrCnt',
    align: 'center',
    sorter: (a, b) => a.tradeSlrCnt.value - b.tradeSlrCnt.value,
  },
  {
    dataIndex: 'parentTradeSlrCnt.value',
    title: '行业有交易卖家数',
    align: 'center',
    sorter: (a, b) => a.parentTradeSlrCnt.value - b.parentTradeSlrCnt.value,
    dataType: 'customRender',
    render: (text, row, index) => {
      // 金额格式化 每隔三位 给金额增加一个英文逗号
      return text.toString().replace(/\d+/, function (n) {
        // 先提取整数部分
        return n.replace(/(\d)(?=(\d{3})+$)/g, function ($1) {
          return $1 + ",";
        });
      });
    }
  },

  {
    dataIndex: 'parentCateTradeSlrCntRate.value',
    title: "行业有交易卖家数占比",
    dataType: 'custom',
    slot: 'parentCateTradeSlrCntRate',
    align: 'center',
    sorter: (a, b) => a.parentCateTradeSlrCntRate.value - b.parentCateTradeSlrCntRate.value,
  },
];
const selectKey = ref(0);
</script>

<template>
  <base-app>
    <a-button-group>
      <user :style="{
      marginRight:0
    }"
      />
      <a-button size="small" type="primary" @click="handle">一键转化</a-button>
    </a-button-group>
    <custom-modal title="市场大盘-卖家概况-子行业分布" v-model:visible="visible" :footer="false" width="95%"
                  style="top: 20px;"
    >
      <template #headerRight>
        <SYCMCustomModalHeaderNotice/>
      </template>
      <div style="max-height: calc(100vh - 150px);overflow-y: auto">
        <div style="text-align: center">
          <a-radio-group v-model:value="selectKey" size="large">
            <a-radio-button style="width: 200px;" :value="0" type="primary">有交易买家数</a-radio-button>
            <a-radio-button style="width: 200px;" :value="1" type="primary">卖家数</a-radio-button>
          </a-radio-group>
        </div>
        <EChart :options="selectKey==0?chartTradeOptions:chartAllOptions" style="height: 280px;margin-top: -10px;"/>
        <a-divider/>
        <base-table size="small" table-name="市场大盘-卖家概况-子行业分布" :data-source="dataSource" :columns="columns">
          <!--          <template #parentCateSlrRate="row">-->
          <!--          <span v-if="row.parentCateSlrRate.value>0" style="color: #1890ff"-->
          <!--          >+{{ (row.parentCateSlrRate.value * 100).toFixed(2) }}%</span>-->
          <!--            <span v-else-if="row.parentCateSlrRate.value<0" style="color: #ff4d4f"-->
          <!--            >{{ (row.parentCateSlrRate.value * 100).toFixed(2) }}%</span>-->
          <!--          </template>-->
          <template #tradeSlrCnt="row">
            <div>
              {{ (row.tradeSlrCnt.value) }}
            </div>
            <div style="font-size: 12px;">
              <span style="color: #999" v-if="typeof row.tradeSlrCnt.cycleCrc=='undefined'">
                --
              </span>
            <span v-else-if="row.tradeSlrCnt.cycleCrc>0" style="color: #1890ff"
            >+{{ (row.tradeSlrCnt.cycleCrc * 100).toFixed(2) }}%</span>
              <span v-else-if="row.tradeSlrCnt.cycleCrc<0" style="color: #ff4d4f"
              >{{ (row.tradeSlrCnt.cycleCrc * 100).toFixed(2) }}%</span>
            </div>
          </template>
          <template #parentCateSlrRate="row">
            <div>
              {{ (row.parentCateSlrRate.value * 100).toFixed(2) }}%
            </div>
            <div style="font-size: 12px;">
              <span style="color: #999" v-if="typeof row.parentCateSlrRate.cycleCqc=='undefined'">
                --
              </span>
              <span v-else-if="row.parentCateSlrRate.cycleCqc>0" style="color: #1890ff"
            >+{{ (row.parentCateSlrRate.cycleCqc * 100).toFixed(2) }}%</span>
              <span v-else-if="row.parentCateSlrRate.cycleCqc<0" style="color: #ff4d4f"
              >{{ (row.parentCateSlrRate.cycleCqc * 100).toFixed(2) }}%</span>
            </div>
          </template>
          <template #parentCateTradeSlrCntRate="row">
            <div>
              {{ (row.parentCateTradeSlrCntRate.value * 100).toFixed(2) }}%
            </div>
            <div style="font-size: 12px;">
              <span style="color: #999" v-if="typeof row.parentCateTradeSlrCntRate.cycleCqc=='undefined'">
                --
              </span>
              <span v-else-if="row.parentCateTradeSlrCntRate.cycleCqc>0" style="color: #1890ff"
            >+{{ (row.parentCateTradeSlrCntRate.cycleCqc * 100).toFixed(2) }}%</span>
              <span v-else-if="row.parentCateTradeSlrCntRate.cycleCqc<0" style="color: #ff4d4f"
              >{{ (row.parentCateTradeSlrCntRate.cycleCqc * 100).toFixed(2) }}%</span>
            </div>
          </template>
        </base-table>
      </div>

    </custom-modal>
    <user-login-modal :login-visible="loginVisible" @close="loginVisible=false"/>
  </base-app>
</template>

<style scoped>

</style>
